import { createDiscreteApi } from 'naive-ui'
export default defineNuxtPlugin((nuxtApp) => {
  const {loadingBar} = createDiscreteApi(["loadingBar"])
  // 监听vue渲染完毕的钩子函数
  nuxtApp.hook("app:mounted", (e) => {
    loadingBar.start();
  });

  // 监听页面的dom开始进入加载,
  nuxtApp.hook("page:start", (e) => {
    loadingBar.start();
  });

  // 监听页面编译完毕生成html源代码的钩子函数，意味着你的网页已经加载完毕了
  nuxtApp.hook("page:finish", (e) => {
    // 这里为什么要加要给setTimeout。因为本地编译从start-finish是非常快，你基本上看不到效果
    setTimeout(() => {
      loadingBar.finish();
    }, 150);
  });

  // 监听页面错误，一般就指调用服务端接口的时候出错了。可以捕捉到
  nuxtApp.hook("app:error", (e) => {
    if (process.client) {
      loadingBar.error();
      setTimeout(() => {
        loadingBar.finish();
      }, 150);
    }
  });
});
